<template>
    <div class="login">
        <div class="content">
            <h2>登录系统</h2>
            <el-form
                ref="loginFormRef"
                :model="loginForm"
                status-icon
                :rules="rules"
                label-width="40px"
                class="demo-ruleForm"
                size="small"
            >
            </el-form>
            <el-form-item label="账号" prop="loginId">
                <el-input v-model="loginForm.loginId" type="text" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" prop="loginPwd">
                <el-input v-model="loginForm.loginPwd" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item prop="ckMe">
                <el-checkbox v-model="loginForm.ckMe" />&nbsp;&nbsp;记住我
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="submitForm(loginFormRef)">登录</el-button>
            <el-button @click="resetForm(loginFormRef)">取消</el-button>
            </el-form-item>
        </div>
    </div> 
</template>
<script>
import { reactive, ref } from 'vue'
import {$login} from '../api/login.js'
export default {
    setup(){
        // 定义一个空的ref对象
        const loginFormRef = ref();
        // 定义登录对象
        const loginForm = reactive({
            loginId:'', // 账号
            loginPwd:'', // 密码
            ckMe:false // 记住我
        })
        // 验证账号
        const validateLoginId = (rule, value, callback) => {
            console.log(11111)
            if (value === '') {
                callback(new Error('请输入账号'))
            } else {
                callback()
            }
        }
        // 验证密码
        const validateLoginPwd = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'))
            } else {
                callback()
            }
        }
        // 定义表单验证规则
        const rules = reactive({
            loginId: [{ validator: validateLoginId, trigger: 'blur' }],
            loginPwd: [{ validator: validateLoginPwd, trigger: 'blur' }],
        })
        
        // 提交方法
        const submitForm =(formEl)=>{
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    $login({
                        loginId:loginForm.loginId,
                        loginPwd:loginForm.loginPwd,
                    }).then(({data})=>{
                        console.log(data);
                    })
                } else {
                console.log('error submit!')
                return false
                }
            })
        }
        // 重置方法
        const resetForm =(formEl)=>{
            if (!formEl) return
            formEl.resetFields()
        }
        return {
            loginForm,
            loginFormRef,
            rules,
            submitForm,
            resetForm
        }
    }
    
}

</script>

<style scoped lang = 'scss'>
.login{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom,#134857,#a1cdda);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: bing;
    color: #eee;
    .content{
        width: 400px;
        border: 1px solid #eee;
        border-radius: 6px;
        padding: 20px;
        h2{
            text-align: center;
            padding-bottom: 20px;
            
        }
        /* elementui 样式覆盖 */
        /* ::v-deep{
            label{
                color: #eee;
            }
        } */
        :v-deep(){
            label{
                color: #eee;
            }
        }
    }
}
</style>
